<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>

</head>
<body>

    <!-- 与事件的修饰符类似, v-model 也有修饰符, 用于控制数据同步的机制 -->

    <!-- .lazy
        使用该修饰符会转变为在 change 事件中同步
    -->
    <div id="app1">
        <input type="text" v-model.lazy="message">
        <p>{{ message }}</p>

    </div>

    <!-- .number
        该修饰符可以将输入转换为 Number 类型,否则输入的是数字,但它的类型其实是 String
    -->
    <div id="app2">
        <input type="number" v-model.number="message">
        <p>{{ message }} {{ typeof(message) }}</p>

    </div>

    <!--
        .trim
        该修饰符可以自动过滤输入的首尾空格
    -->
    <div id="app3">
        <input type="text" v-model.trim="message" >
        <p>{{ message }}</p>

    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app1 = new Vue({
            el: "#app1",
            data: {
                message: ""
            }
        });

        var app2 = new Vue({
            el: "#app2",
            data: {
                message: ""
            }
        });

        var app3 = new Vue({
            el: "#app3",
            data: {
                message: ""
            }
        })


    </script>

</body>
</html>